<template>
  <div class="infor">
    <div class="infor_top">
      <h4>系统信息</h4>
    </div>
    <div class="infor_list">
      <ul class="infor_list_ul">
        <li>
          <p class="infor_list_left">服务器操作系统</p>
          <p>否</p>
        </li>
        <li>
          <p class="infor_list_left">PHP 版本</p>
          <p>否</p>
        </li>
        <li>
          <p class="infor_list_left">安全模式</p>
          <p>否</p>
        </li>
        <li>
          <p class="infor_list_left">Socket 支持</p>
          <p>否</p>
        </li>
        <li>
          <p class="infor_list_left">GD 版本</p>
          <p>否</p>
        </li>
        <li>
          <p class="infor_list_left infor_list_last">IP 库版本</p>
          <p class="infor_list_last">否</p>
        </li>
      </ul>
      <ul class="infor_list_ul">
        <li>
          <p class="infor_list_left">程序版本</p>
          <p class="infor_list_rightlast">否</p>
        </li>
        <li>
          <p class="infor_list_left">MySQL 版本</p>
          <p class="infor_list_rightlast">否</p>
        </li>
        <li>
          <p class="infor_list_left">时区设置</p>
          <p class="infor_list_rightlast">否</p>
        </li>
        <li>
          <p class="infor_list_left">Zlib 支持</p>
          <p class="infor_list_rightlast">否</p>
        </li>
        <li>
          <p class="infor_list_left">文件上传限制</p>
          <p class="infor_list_rightlast">否</p>
        </li>
        <li>
          <p class="infor_list_left infor_list_last">更新日期</p>
          <p class="infor_list_last infor_list_rightlast">否</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.infor {
  width: 100%;
  margin-top: 20px;
  border: 1px solid rgba(217, 217, 217, 100);
  margin-bottom: 40px;

  .infor_top {
    height: 35px;
    line-height: 35px;
    background-color: rgba(246, 246, 247, 100);
    text-align: left;
    border-bottom: 1px solid rgba(217, 217, 217, 100);

    h4 {
      width: 98%;
      margin: 0 auto;
      color: rgba(16, 16, 16, 100);
      font-size: 14px;
    }
  }

  .infor_list {
    display: flex;
    justify-content: space-between;

    .infor_list_ul {
      width: 50%;

      li {
        display: flex;
        justify-content: space-between;

        p {
          width: 50%;
          height: 35px;
          line-height: 35px;
          background-color: rgba(255, 255, 255, 100);
          color: rgba(16, 16, 16, 100);
          font-size: 13px;
          text-align: left;
          font-family: Roboto;
          padding-left: 2%;
          border-bottom: 1px solid rgba(217, 217, 217, 100);
          border-right: 1px solid rgba(217, 217, 217, 100);
        }

        .infor_list_left {
          background-color: rgba(251, 251, 251, 100);
        }

        .infor_list_last {
          border-bottom: none;
        }

        .infor_list_rightlast {
          border-right: none;
        }
      }
    }
  }
}
</style>